
<template>
    <div class="forget">
        <div class="forgetDiv">
            <div class="title">
                <h1 class="forget-title">缺陷跟踪系统</h1>
                <h3 class="f-title">忘记密码</h3>
            </div>
            <div class="main">
                <el-form :model="findPasswordForm" ref="findPasswordForm" :rules="rules">
                    <el-form-item prop="email">
                        <el-input placeholder="请输入邮箱" maxlength="32" v-model="findPasswordForm.email"></el-input>
                    </el-form-item>
                    <el-form-item prop="code">
                        <el-input placeholder="请输入验证码6位" type="number" maxlength="6" v-model="findPasswordForm.code">
                            <el-button slot="append" @click="sendEmailCode()" :disabled="disabled">{{ msg }}</el-button>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input placeholder="请输入新密码6-18位" type="password" maxlength="18" v-model="findPasswordForm.password" show-password></el-input>
                    </el-form-item>
                    <el-form-item prop="passwordConfirm">
                        <el-input placeholder="请重复新密码" type="password" maxlength="18" v-model="findPasswordForm.passwordConfirm" show-password></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" :loading="loading" @click="submitFindPassword('findPasswordForm')" style="width: 250px">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import login from '@/api/login'
import common from '@/api/common'
    export default {
        name: "Forget",
        data(){
            var email = (rule, value, callback) => {
                if(!value) {
                    return callback(new Error('请输入邮箱'))
                }else if(!/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/.test(value)) {
                    return callback(new Error('请输入正确的邮箱'))
                }else {
                    callback()
                }
            };
            var password = (rule, value, callback) => {
                if(!value) {
                    return callback(new Error('请输入密码'))
                }else if(!/(?=.*[a-zA-Z])[a-zA-Z0-9]{6,18}/.test(value)) {
                    return callback(new Error("密码长度在6-18个字符,只能包含数字、大小写字母 且 至少包含一个字母"))
                }else {
                    callback()
                }
            };
            var passwordConfirm = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('请再次输入密码'))
                } else if (value !== this.findPasswordForm.password) {
                    return callback(new Error('两次输入密码不一致!'))
                } else {
                    callback();
                }
            };
            var code = (rule, value, callback) => {
                if(!value) {
                    return callback(new Error('请输入6位验证码'))
                }else if(value.length !== 6) {
                    return callback(new Error('请输入6位验证码'))
                }else{
                    callback()
                }
            }
            return{
                // 倒计时
                disabled: false,
                msg: '获取验证码',
                count: 60,
                timer: 0,
                // 按钮加载
                loading: false,
                // 找回密码
                findPasswordForm: {
                    email: '',
                    password: '',
                    passwordConfirm: '',
                    code: ''
                },
                rules: {
                    email: [
                        { validator: email, trigger: 'blur' }
                    ],
                    password: [
                        { validator: password, trigger: 'blur' }
                    ],
                    passwordConfirm: [
                        { validator: passwordConfirm, trigger: 'blur' }
                    ],
                    code: [
                        { validator: code, trigger: 'blur' }
                    ]
                },
            };
        },
        methods:{
            submitFindPassword(formName){
                // console.log("即将跳转"),
                // this.$router.push({name: 'Login'})
                this.$refs[formName].validate((valid) => {
                    if(valid) {
                        this.loading = true
                        // 请求
                        login.findPassword(this.findPasswordForm).then(_ => {
                            console.log("ttufugyu")
                            if(_) {
                                // 请求成功
                                this.$message({
                                    message: '密码修改成功',
                                    type: 'success'
                                })
                                this.$router.push('/home')
                            }
                        }).finally(_ => {
                            this.loading = false
                        })
                    }
                })
            },
             // 获取验证码
            sendEmailCode() {
                this.$refs.findPasswordForm.validateField('email', result => {
                    if(!result) {
                        // 按钮倒计时
                        this.disabled = true;
                        this.msg = this.count-- + 's后重新获取';
                        this.timer = setInterval(() => {
                            this.msg = this.count-- + 's后重新获取';
                            if (this.count < 0) {
                                this.msg = '点击获取验证码';
                                this.count = 60;
                                this.disabled = false;
                                clearInterval(this.timer);
                            }
                        }, 1000);
                        // 发送验证码请求
                        common.getRequestCode(this.findPasswordForm.email).then(_ => {
                            common.getEmailCode(this.findPasswordForm.email, _.data.permissionCode).then(_ => {
                                if(_) {
                                    // 通知邮箱发送
                                    this.$notify({
                                        title: '邮箱验证码已发送',
                                        message: '验证码有效时长5分钟, 失效请重新发送',
                                        type: 'success',
                                        duration: 10 * 1000
                                    })
                                }
                            })
                        })
                    }
                });
            },
        }
    }
</script>

<style scoped >
    .el-input {
        width: 250px;
    }
    .forget {
        width: 100%;
        height: 100%;
    }
    .forgetDiv {
        position: absolute;
        top: 40%;
        left: 50%;
        margin-top: -200px;
        margin-left: -250px;
        width: 450px;
        height: 350px;
        background: #fff;
        border-radius: 5%;
    }
    .title {
        width: 450px;
        height: 150px;
        background-color: rgb(113, 201, 239);
    }
    .forget-title {
        margin: 10px;
        padding-top: 40px;
        padding-bottom: 10px;
        text-align: center;
    }
    .f-title {
        text-align: center;
        padding-top: 0px;
        color: white
    }
    .main {
        width: 400px;
        height: 250px;
        margin-top: 150px;
        position: absolute;
        text-align: center;
        top: 25px;
        right: 25px;
    }
</style>
